<template>
    <div class="father">
    </div>
    <div class="nav">
        <div :class="[{'box':item.Istatus}]" v-for="item in data" :key="item.id" @click="handler(item.id)">
            <div>
                <img :src=item.imgSrc width="40" height="26" class="mx-1">
            </div>
            <div class="mx-2">{{ item.content }}</div>
        </div>
    </div>
    <button v-for="(item, index) in datalist" :key="item.id"
        @click="handlerPage(item.id, index)">
        {{ item.content }}
    </button>
    <ul>
        <li v-for="item in list">{{ item.title }}</li>
    </ul>
</template>

<script setup>
import { nanoid } from 'nanoid';
import { ref, watchEffect } from 'vue';
import { getTopicsByParams } from './index'


const data = ref([
    {
        id:nanoid(5),
        imgSrc:require('../assets/imgs/购物车.png'),
        content:'购物车',
        Istatus:false
    },
    {
        id:nanoid(5),
        imgSrc:require('../assets/imgs/收藏.png'),
        content:'收藏',
        Istatus:false
    },
    {
        id:nanoid(5),
        imgSrc:require('../assets/imgs/首页.png'),
        content:'首页',
        Istatus:false
    },
    {
        id:nanoid(5),
        imgSrc:require('../assets/imgs/设置.png'),
        content:'设置',
        Istatus:false
    },
    {
        id:nanoid(5),
        imgSrc:require('../assets/imgs/_我的.png'),
        content:'我的',
        Istatus:false
    },
])
const handler = id =>{
    data.value.find(item=>{
        if(item.id == id){
            item.Istatus = true
        } else {
            item.Istatus = false
        }
    })
}
const datalist = ref([
    {
        id: nanoid(5),
        content: '1',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '2',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '3',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '4',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '5',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '6',
        cStatus: false
    },
])

const currrentPage = ref(0);

const handlerPage = (id, index) => {
    currrentPage.value = Number.parseInt(index)
    console.log(currrentPage.value);
}
const list = ref([])
watchEffect(() => {
    getTopicsByParams({ limit: 5, page: currrentPage.value+1 })
        .then(res => {
            list.value = res.data.data
        })
})
</script>

<style scoped>
.father{
    width: 300px;
    height: 400px;
    background-color: rgb(243,243,243);
    border: solid 1px rgb(226,227,228);
}
.nav{
    width: 300px;
    height: 50px;
    background-color: white;
    border: solid 1px rgb(226,227,228);
    display: flex;
    justify-content: space-between;
}
.box{
    background-color: blue;
}
</style>